import React, { Component } from 'react';
// import logo from '../logo.svg'
import './Tabber.scss'
import home from '../assets/home.png'
import modular from '../assets/modular.png'
import layers from '../assets/layers.png'
import user from '../assets/user.png'
import cart from '../assets/cart_empty.png'
class Tabber extends Component {
    constructor(props){
        super(props);

        this.state = {
            currentIndex:0,
            arr:[
                {name:'店铺',pic:home},
                {name:'分类',pic:modular},
                {name:'全部商品',pic:layers},
                {name:'购物车',pic:cart},
                {name:'个人中心',pic:user},
            ]
        }
        this.handleClick.bind(this)
    }
    handleClick(index){
        this.setState({
            currentIndex:index
        })
    }
    render() {
        return (
            <div className='tabber'>
                {
                    this.state.arr.map((item,index)=>{
                        return(
                            <div className={`footer ${this.state.currentIndex == index?'active':''}`} onClick={
                                ()=>{
                                    this.handleClick(index)
                                }
                            } key={index}>
                                <img src={item.pic} alt="" />
                                <div className='name'>{item.name}</div>
                            </div>
                        )
                    })
                }
                
            </div>
        );
    }
}

export default Tabber;